<template lang="jade">
#home
  //- .header
    //- <!-- router-link.menu.icon-reorder(to='/') -->
    h1.page-title
  //- .home-banner
    div
      img(src='static/images/banner-1.jpg')
  //- form#searchBar.search-form
    .weui-flex
      i.icon-search
      input.search-input.weui-flex__item(type='text', v-model='searchKeyword', @keyup.stop.enter='search')
      button.search-submit(@click.prevent.stop='search') 检索
  //- .home-intro.clearfix
    .col-xs-4
      h4 馆藏
      .number-label {{ stats.HOLDINGS }}+
    .col-xs-4
      h4 借阅
      .number-label {{ stats.CIRCULATES }}+
    .col-xs-4
      h4 读者
      .number-label {{ stats.READERS }}+
  //- .tabs.weui-flex
    .weui-flex__item.text-center(:class='{active: activeTab === 1}', @click="showTab(1)") 联图服务
    .weui-flex__item.text-center(:class='{active: activeTab === 2}', @click="showTab(2)") 联图活动
    .weui-flex__item.text-center(:class='{active: activeTab === 3}', @click="showTab(3)") 我的图书馆
    //- .weui-flex__item.text-center(:class='{active: activeTab === 3}', @click="showTab(3)") 我的图书馆
  com-header
  .home-btns
    a.col-xs-4(v-for='(menu, index) in menus', @click='goto(menu)', v-show='menu.group === activeTab')
      i.icon-fontello.demo-icon(:class='"unlib-"+menu.icon', :style="{backgroundColor: menu.color}")
      .menu-name {{menu.name}}



</template>

<script>
import { mapGetters } from 'vuex'
import api from '../api-new'
import menu from '../menu'
import comHeader from '../components/Header'

export default {
  components: {
    comHeader
  },
  data () {
    return {
      siteName: window.API_CONFIG.site_name,
      searchKeyword: '',
      activeTab: 3,
      menus: menu
    }
  },
  computed: {
    ...mapGetters({
      'user': 'userInfo'
    })
  },
  mounted () {
    // this.getStats()
    if (this.$route.name === 'tool') {
      this.activeTab = 2
    }
    if (this.$route.name === 'center') {
      this.activeTab = 3
    }
  },
  methods: {
    getStats () {
      api.getStats().then(resp => {
        this.stats = resp.data
      })
    },

    showTab (index) {
      this.activeTab = index
    },
    auth () {
      // const uid = this.$cookie.get('uid')
      // if (uid && uid.length !== 0) {
      //   return true
      // }
      // return false
      return !!this.user
    },
    goto (menu) {
      if (menu.requireAuth && !this.auth()) {
        // window.alert('必须先登录')
        this.$router.push({
          name: 'login',
          params: {
            redirect: menu.route || false
          }
        })
        return
      }
      if (menu.route) {
        this.$router.push({
          name: menu.route
        })
      }
      if (menu.link) {
        const uid = this.$cookie.get('uid')
        if (menu.webview === false) {
          window.location.href = menu.requireAuth ? menu.link + '?uid=' + uid : menu.link
        } else {
          this.$router.push({
            name: 'webview',
            params: {
              title: menu.name,
              link: menu.link
            }
          })
        }
        return
      }
    }
  }
}
</script>

<style lang="scss">
.home-btns .col-xs-4 {
  padding-top: 1rem;
}
.home-btns i {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin-bottom: 0.2rem;
  &:before {
    color: #fff;
    margin: 0;
  }
}
.search-form {
  input {
    padding-left: 0.5em;
  }
}

.tabs {
  // padding-bottom: -2px;

  .weui-flex__item {
    font-size: 15px;
    padding: 8px 0;
    border-bottom: 3px solid #f6f7f8;
    & + .weui-flex__item {
      // border-left: 1px solid #f6f7f8;
    }

    &:active, &:focus {
      background-color: #eee;
    }
  }
  .active {
    border-bottom-color: dodgerblue;
  }
}

.weui-tabbar__icon {
  &:before {
    margin: 0;
  }
}

</style>
